<template>
    <q-page>
        <div class="radioBox">
            <q-item class="radioWrap" :style="{left: this.$api.ui.drawer.open? '250px' :0 }">
                <q-item-main>
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="0" label="全部" color="primary" />
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="1" label="24小时" color="primary" />
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="3" label="3天" color="primary" />
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="7" label="7天" color="primary" />
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="14" label="14天" color="primary" />
                    <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="30" label="30天" color="primary" />
                </q-item-main>
                <q-item-side right :class="this.isMobile ? 'filterFavor' : ''">
                    <q-toggle
                        v-model="showFavored"
                        checked-icon="check"
                        color="primary"
                        label="只看收藏"
                        dense
                        @input="filterOnlyFavored"
                    />
                </q-item-side>
            </q-item>
        </div>
        <q-inner-loading visible v-if="loading" class="loading">
            <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
            <b class="text-primary">数据加载中...</b>
        </q-inner-loading>
        <q-infinite-scroll :handler="loadMoreVideos" ref="scroll">
            <q-list separator>
                <video-item 
                    v-for="(item,idx) in list" 
                    :key="item.vid + idx"
                    :item="item" 
                    position="all"/>
            </q-list>
        </q-infinite-scroll>
    </q-page>
</template>

<script>
import VideoItem from "./VideoItem.vue";

export default {
    name: 'PageDouyinVideos',
    components: { VideoItem },
    data() {
        return {
            list: [],
            days: 0,
            accountid: this.$route.params.id,
            articals: [],
            limit: 20,
            filter: '',
            showFavored: false,
            accounttags: [],
            showVideoModal: false,
            showingItem: {},
            isMobile: false,
            videoUrl: 'about:blank',
            page: 1,
            loading: true,
            isStoped: false
        }
    },
    mounted(){
        this.$api.ui.pageTitle = '热门抖音视频'
        // this.getVideos()
        this.isMobile = this.$q.platform.is.mobile
        this.$refs.scroll.loadMore()
    },
    methods: {
        onCopy() {
            this.$q.notify({
                message: '复制成功', 
                position: 'top',
                color: 'green',
                timeout: 1000
            })  
        },
        getVideos(){
            // let { userid, caasid } = this.account
            this.$api.douyin.getVideos( {
                accountid: '', 
                page: this.page, 
                limit: this.limit,
                showFavored: this.showFavored,
                days: this.days
            }, data => {
                this.loading = false
                this.list.push(...data)
            })
        },
        loadMoreVideos(page, done){
            this.loading = true
            this.$api.douyin.getVideos({
                account: '', 
                page, 
                limit: this.limit,
                showFavored: this.showFavored,
                days: this.days
            }, data => {
                this.list.push( ...data )
                this.loading = false
                done( data.length < this.limit )
            })
        },
        onChangeDays( value ) {
            this.showFavored = false
            this.list = []
            this.$refs.scroll.reset()
            if( this.isStoped ){
                this.$refs.scroll.resume()
            }
            this.$refs.scroll.loadMore()
        },
        filterOnlyFavored( value ) {
            this.days = 0
            this.list = []
            this.showFavored = value
            if( value === true ){
                this.$refs.scroll.stop()
                this.isStoped = true
                this.getVideos()
            } else {
                this.$refs.scroll.reset()
                this.$refs.scroll.resume()
            }
        }
    }
}
</script>

<style>
.accoutAvatar{
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    border-radius: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6 );
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0)
}
.radioBox{
    height: 64px;
    width: 100%;
    background: #fff;
}
.radioWrap{
    position: fixed;
    min-height: 64px;
    background: #fff;
    z-index: 50;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2 );
    flex-wrap: wrap;
    right: 0;
}
.filterFavor{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>